<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <jsp:include page="/common/backend_common.jsp"/>
    <jsp:include page="/common/page.jsp"/>
</head>
<body class="no-skin" youdao="bind" style="background: white">
<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>

<div class="page-header">
    <h1>
        用户管理
        <small>
            <i class="ace-icon fa fa-angle-dou`ble-right"></i>
            维护部门与用户关系
        </small>
    </h1>
</div>
<div class="main-content-inner">
    <div class="col-sm-3">
        <div class="table-header">
            部门列表&nbsp;&nbsp;
            <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add "></i>
            </a>
        </div>
        <div id="deptList">
        </div>
    </div>
    <div class="col-sm-9">
        <div class="col-xs-12">
            <div class="table-header">
                用户列表&nbsp;&nbsp;
                <a class="green" href="#">
                    <i class="ace-icon fa fa-plus-circle orange bigger-130 user-add"></i>
                </a>
            </div>
            <div>
                <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="dataTables_length" id="dynamic-table_length"><label>
                                展示
                                <select id="pageSize" name="dynamic-table_length" aria-controls="dynamic-table" class="form-control input-sm">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select> 条记录 </label>
                            </div>
                        </div>
                    </div>
                    <table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid"
                           aria-describedby="dynamic-table_info" style="font-size:14px">
                        <thead>
                        <tr role="row">
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                姓名
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                所属部门
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                邮箱
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                电话
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                状态
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
                        </tr>
                        </thead>
                        <tbody id="userList"></tbody>
                    </table>
                    <div class="row" id="userPage">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog-dept-form" style="display: none;">
    <form id="deptForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td style="width: 80px;"><label for="parentId">上级部门</label></td>
                <td>
                    <select id="parentId" name="parentId" data-placeholder="选择部门" style="width: 200px;"></select>
                    <input type="hidden" name="id" id="deptId"/>
                </td>
            </tr>
            <tr>
                <td><label for="deptName">名称</label></td>
                <td><input type="text" name="name" id="deptName" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="deptSeq">顺序</label></td>
                <td><input type="text" name="seq" id="deptSeq" value="1" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="deptRemark">备注</label></td>
                <td><textarea name="remark" id="deptRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-user-form" style="display: none;">
    <form id="userForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td style="width: 80px;"><label for="parentId">所在部门</label></td>
                <td>
                    <select id="deptSelectId" name="deptId" data-placeholder="选择部门" style="width: 200px;"></select>
                </td>
            </tr>
            <tr>
                <td><label for="userName">名称</label></td>
                <input type="hidden" name="id" id="userId"/>
                <td><input type="text" name="username" id="userName" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userMail">邮箱</label></td>
                <td><input type="text" name="mail" id="userMail" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userTelephone">电话</label></td>
                <td><input type="text" name="telephone" id="userTelephone" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userStatus">状态</label></td>
                <td>
                    <select id="userStatus" name="status" data-placeholder="选择状态" style="width: 150px;">
                        <option value="1">有效</option>
                        <option value="0">无效</option>
                        <option value="2">删除</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="userRemark">备注</label></td>
                <td><textarea name="remark" id="userRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>

<!-- mustache引擎,部门列表元素渲染 -->
<script id="deptListTemplate" type="x-tmpl-mustache">
<ol class="dd-list">
    {{#deptList}}
    <li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
        <div class="dd2-content" style="cursor:pointer;">
            {{name}}
            <span style="float:right;">
                <a class="green dept-edit" href="#" data-id="{{id}}" >
                    <i class="ace-icon fa fa-pencil bigger-100"></i>
                </a>
                &nbsp;
                <a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
                    <i class="ace-icon fa fa-trash-o bigger-100"></i>
                </a>
            </span>
        </div>
    </li>
    {{/deptList}}
</ol>
</script>

<script id="userListTemplate" type="x-tmpl-mustache">
{{#userList}}
<tr role="row" class="user-name odd" data-id="{{id}}"><!--even -->
    <td><a href="#" class="user-edit" data-id="{{id}}">{{username}}</a></td>
    <td>{{showDeptName}}</td>
    <td>{{mail}}</td>
    <td>{{telephone}}</td>
    <td>{{#bold}}{{showStatus}}{{/bold}}</td> <!-- 此处套用函数对status做特殊处理 -->
    <td>
        <div class="hidden-sm hidden-xs action-buttons">
            <a class="green user-edit" href="#" data-id="{{id}}">
                <i class="ace-icon fa fa-pencil bigger-100"></i>
            </a>
            <a class="red user-acl" href="#" data-id="{{id}}">
                <i class="ace-icon fa fa-flag bigger-100"></i>
            </a>
        </div>
    </td>
</tr>
{{/userList}}
</script>

<script type="application/javascript">
    $(function(){

        var deptList; //存储树形部门列表
        var deptMap = {} ; //缓存部门信息
        var userMap = {} ; //缓存用户信息
        var optionStr = "";
        var lastClickDeptId = -1; //最近点击过的部门ID

        var deptListTemplate = $('#deptListTemplate').html();
        Mustache.parse(deptListTemplate);
        var userListTemplate = $('#userListTemplate').html();
        Mustache.parse(userListTemplate);

        loadDeptTree(); //加载树

        function loadDeptTree() {
            $.ajax({
                url: "sys/dept/tree.json",
                success: function (result) {
                    if (result.ret) {
                        deptList = result.data;
                        //使用模板渲染
                        var rendered = Mustache.render(deptListTemplate, {deptList: result.data});
                        //渲染首层部门
                        $("#deptList").html(rendered);
                        //递归渲染部门层级
                        recursiveRenderDept(result.data);
                        //自动绑定点击事件，展开
                        bindDeptClick();
                    } else {
                        showMessage("加载部门列表", result.msg, false);
                    }
                }
            })
        }

        //递归渲染部门树
        function recursiveRenderDept(deptList) {
            if(deptList && deptList.length > 0){
                $(deptList).each(function (i, dept) {
                    deptMap[dept.id] = dept;
                    if (dept.deptList.length > 0){
                        var rendered = Mustache.render(deptListTemplate, {deptList: dept.deptList});
                        $("#dept_"+ dept.id).append(rendered);
                        recursiveRenderDept(dept.deptList);
                    }
                })
            }
        }

        //绑定部门点击事件操作
        //1.点击编辑
        //2.点击删除
        //3.点击部门名称，加载用户列表
        function bindDeptClick() {
            //删除
            $(".dept-delete").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                var deptId = $(this).attr("data-id");
                var deptName = $(this).attr("data-name");
                if (confirm("确认要删除部门[" +deptName+"]吗?")) {
                   $.ajax({
                       url: "sys/dept/delete.json",
                       data: {
                           deptId: deptId
                       },
                       type: "POST",
                       success: function (result) {
                          if(result.ret){
                              showMessage("删除部门[" +deptName+"]", "删除成功", true);
                              loadDeptTree();
                          } else {
                              showMessage("删除部门[" +deptName+"]", result.msg, false);
                          }
                       }

                   })
                }
            });

            //点击部门名称，显示用户列表
            $(".dept-name").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                var deptId = $(this).attr("data-id");
                //处理选中效果
                handleDeptSelected(deptId);
            });

            //编辑部门
            $(".dept-edit").click(function (e) {
                e.preventDefault();  //阻止默认
                e.stopPropagation(); //取消冒泡
                var deptId = $(this).attr("data-id");
                //点击编辑时设置最新点击的部门ID
                lastClickDeptId = deptId;
                $("#dialog-dept-form").dialog({
                    model: true, //除了增加窗口之外其他不可点击
                    title: "编辑部门",
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //取消自带的关闭
                        optionStr = "<option value=\"0\">-</option>";
                        recursiceRenderDeptSelect(deptList, 1);
                        $("#deptForm")[0].reset(); //将表格清空
                        $("#parentId").html(optionStr);
                        $("#deptId").val(deptId);
                        var targetDept = deptMap[deptId]; //需要更新的部门
                        if (targetDept) {
                            //更新之前这个部门其他属性值
                            $("#parentId").val(targetDept.parentId);
                            $("#deptName").val(targetDept.name);
                            $("#deptSeq").val(targetDept.seq);
                            $("#deptRemark").val(targetDept.remark);
                        }
                    },
                    buttons: {
                        "更新": function (e) {
                            e.preventDefault(); //阻止默认效果
                            updateDept(false, function (data) {
                                    $("#dialog-dept-form").dialog("close"); //关闭窗口
                                }, function (data) {
                                    showMessage("更新部门", data.msg, false);
                                }
                            )

                        },
                        "取消": function (e) {
                            $("#dialog-dept-form").dialog("close"); //关闭窗口
                        }
                    }
                });

            });
        }

        function handleDeptSelected(deptId) {

            //高亮选中新部门,使之前选中的新部门变为普通
            if (lastClickDeptId != -1){
                //使之前选中部门为普通样式
                var lastDept = $("#dept_" + lastClickDeptId + " .dd2-content:first");
                lastDept.removeClass("btn-yellow");
                lastDept.removeClass("no-hover");
            }
            //使得当前选中的部门为高亮
            var currentDept = $("#dept_" + deptId + " .dd2-content:first");
            currentDept.addClass("btn-yellow");
            currentDept.addClass("no-hover");
            lastClickDeptId = deptId;
            loadUserList(deptId);

        }

        //点击部门时，加载用户列表
        function loadUserList(deptId) {
            var pageSize = $("#pageSize").val(); //获取页面需要展示的行数
            var url = "sys/user/page.json?deptId=" + deptId;
            var pageNo = $("#userPage .pageNo").val() || 1; //若没值，给1
            $.ajax({
                url : url,
                data : {
                    pageSize : pageSize,
                    pageNo: pageNo
                },
                success: function (result) {
                    renderUserListAndPage(result, url);
                }
            });
        }

        //渲染用户分页列表
        function renderUserListAndPage(result, url) {
            if (result.ret) {
                if ((result.data.total) > 0 ){ //分页是否大于0
                    var rendered = Mustache.render(userListTemplate,{
                        userList: result.data.data,
                        "showDeptName": function () {
                            return deptMap[this.deptId].name;
                        },
                        "showStatus": function () {
                            return this.status == 1 ? '有效' : (this.status == 0 ? '无效' : '删除');
                        },
                        "bold": function () {
                            return function (text, render) {
                                var status = render(text); //渲染状态
                                if(status == '有效') {
                                    return "<span class='label label-sm label-success'>有效</span>"
                                } else if (status == '无效'){
                                    return "<span class='label label-sm label-warning'>无效</span>"
                                } else {
                                    return "<span class='label'>删除</span>"
                                }
                            }
                        }
                    });
                    $("#userList").html(rendered); //写入渲染页面
                    //绑定用户点击的方法
                    bindUserClick();
                    $.each(result.data.data, function (i, user) {
                        userMap[user.id] = user;
                    })
                } else { //无分页信息
                    $("#userList").html('');
                }
                var pageSize = $("#pageSize").val();
                var pageNo = $("#userPage .pageNo").val() || 1;
                renderPage(url, result.data.total, pageNo, pageSize, result.data.total > 0 ? result.data.total : 0, "userPage", renderUserListAndPage)
            } else {
                showMessage("获取部门下用户列表", result.msg, false);
            }

            //新增用户
            $(".user-add").click(function (e)  {
                e.preventDefault();
                e.stopPropagation();
                $("#dialog-user-form").dialog({
                    model: true, //除了增加窗口之外其他不可点击
                    title: "新增用户",
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //取消自带的关闭
                        optionStr = "";//必须挂上部门
                        recursiceRenderDeptSelect(deptList, 1);
                        console.log("optionStr:" + optionStr);
                        $("#userForm")[0].reset(); //将表格清空
                        $("#deptSelectId").html(optionStr);
                        //var deptSelect = $("#deptSelectId");
                        //selectedCurrentAclModule(deptSelect, lastClickDeptId);
                        $("#deptSelectId option[value="+lastClickDeptId+"]").attr("selected",true);
                    },
                    buttons: {
                        "添加": function (e) {
                            e.preventDefault(); //阻止默认效果
                            updateUser(true, function (data) {
                                    $("#dialog-user-form").dialog("close"); //关闭窗口
                                    loadUserList(lastClickDeptId);
                                }, function (data) {
                                    showMessage("新增用户", data.msg, false);
                                }
                            )
                        },
                        "取消": function (e) {
                            $("#dialog-user-form").dialog("close"); //关闭窗口
                        }
                    }
                });
            });

            function selectedCurrentAclModule(aclModuleSelect, currentAclModuleName) {
                //var options = document.getElementById("aclModuleSelectId").options;
                var options = aclModuleSelect.get(0).options;
                var length = options.length;
                for(var i=0; i<length; i++) {
                    console.log(options[i].value);
                    if(options[i].getAttribute("value") == currentAclModuleName) {
                        options[i].selected = true;
                        break;
                    }
                }
            }

            //编辑用户
            function bindUserClick() {
                $(".user-acl").click(function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var userId = $(this).attr("data-id");
                    $.ajax({
                        url: 'sys/user/aclsAndRoles.json',
                        data: {
                            userId: userId
                        },
                        success: function (result) {
                            if(result.ret) {
                                console.log(result);
                            }else{
                                showMessage("获取用户分配的权限与角色的数据", result.msg, false);
                            }
                        }
                    })
                })
                $(".user-edit").click(function (e) {
                    e.preventDefault();  //阻止默认
                    e.stopPropagation(); //取消冒泡
                    var userId = $(this).attr("data-id");
                    $("#dialog-user-form").dialog({
                        model: true, //除了增加窗口之外其他不可点击
                        title: "编辑用户",
                        open: function (event, ui) {
                            $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //取消自带的关闭
                            optionStr = "";
                            recursiceRenderDeptSelect(deptList, 1);
                            $("#userForm")[0].reset(); //将表格清空
                            $("#deptSelectId").html(optionStr);
                            var targetUser = userMap[userId]; //需要更新的用户
                            if (targetUser) {
                                //更新之前这个用户其他属性值的展示
                                $("#deptSelectId").val(targetUser.deptId);
                                $("#userName").val(targetUser.username);
                                $("#userMail").val(targetUser.mail);
                                $("#userTelephone").val(targetUser.telephone);
                                $("#userStatus").val(targetUser.status);
                                $("#userRemark").val(targetUser.remark);
                                $("#userId").val(targetUser.id);
                            }
                        },
                        buttons: {
                            "更新": function (e) {
                                e.preventDefault(); //阻止默认效果
                                updateUser(false, function (data) {
                                        $("#dialog-user-form").dialog("close"); //关闭窗口
                                        loadUserList(lastClickDeptId);
                                    }, function (data) {
                                        showMessage("更新用户", data.msg, false);
                                    }
                                )

                            },
                            "取消": function (e) {
                                $("#dialog-user-form").dialog("close"); //关闭窗口
                            }
                        }
                    });
                })
            }
        }

        //点击按钮跳出增加窗口
        $(".dept-add").click(function (e)  {
            e.preventDefault();
            e.stopPropagation();
            $("#dialog-dept-form").dialog({
                model: true, //除了增加窗口之外其他不可点击
                title: "新增部门",
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //取消自带的关闭
                    optionStr = "<option value=\"0\">-</option>";
                    recursiceRenderDeptSelect(deptList, 1);
                    $("#deptForm")[0].reset(); //将表格清空
                    $("#parentId").html(optionStr);
                },
                buttons: {
                    "添加": function (e) {
                        e.preventDefault(); //阻止默认效果
                        updateDept(true, function (data) {
                            $("#dialog-dept-form").dialog("close"); //关闭窗口
                        }, function (data) {
                                showMessage("新增部门", data.msg, false);
                            }
                        )

                    },
                    "取消": function (e) {
                        $("#dialog-dept-form").dialog("close"); //关闭窗口
                    }
                }
            });
        });

        //递归生成选择框中的部门树
        function recursiceRenderDeptSelect(deptList, level) {
            level = level | 0; //level没有传值的话，让level等于0
            if (deptList && deptList.length > 0) {
                $(deptList).each(function (i, dept) {
                    deptMap[dept.id] = dept;
                    var blank = "";
                    //不是第一层部门
                    if (level > 1) {
                        for(var j = 3; j<=level; j++){
                            blank +="..";
                        }
                        blank +="∟";
                    }
                    optionStr += Mustache.render("<option value='{{id}}'>{{name}}</option>", {id: dept.id, name: blank + dept.name});
                    if (dept.deptList && dept.deptList.length > 0) {
                        recursiceRenderDeptSelect(dept.deptList, level + 1);
                    }
                });
            }
        }


        /**
         * 更新用户
         * @param isCreate
         * @param successCallback
         * @param failCallback
         */
        function updateUser(isCreate, successCallback, failCallback) {
            $.ajax({
                url: isCreate ? "sys/user/save.json" : "sys/user/update.json",
                data: $("#userForm").serializeArray(),//表格数据
                type: 'POST',
                success: function (result) {
                    if(result.ret){
                        loadDeptTree(); //成功后重新渲染
                        if (successCallback) {
                            successCallback(result);
                        }

                    }else {
                        if (failCallback) {
                            failCallback(result);
                        }
                    }
                }
            });
        }

        /**
         * 更新部门
         * @param isCreate
         * @param successCallback
         * @param failCallback
         */
        function updateDept(isCreate, successCallback, failCallback) {
            $.ajax({
                url: isCreate ? "sys/dept/save.json" : "sys/dept/update.json",
                data: $("#deptForm").serializeArray(),//表格数据
                type: 'POST',
                success: function (result) {
                    if(result.ret){
                        loadDeptTree(); //成功后重新渲染
                        loadUserList(lastClickDeptId);
                        if (successCallback) {
                            successCallback(result);
                        }

                    }else {
                        if (failCallback) {
                            failCallback(result);
                        }
                    }
                }
            });
        }
    });
</script>
</body>
</html>
